Тема: [MV][MZ] Обработка нажатий на клавиатуру и мышь

Предисловие

Иногда при разработке механик или мини-игр хочется нестандартно обрабатывать нажатия на клавиши клавиатуры или мыши. Например, совершать игровое действие по нажатию на произвольную клавишу (стрельба, прыжок, лечение), управлять интерфейсом (открывать игровую карту, ещё какое-то меню) и много что ещё.
Существует несколько способов это делать.

Способ 0

Возможно, вам достаточно будет назначить стандартные действие на нестандартные клавиши. Например, сделать ходьбу по WASD. Для подобного достаточно расширить словарь Input.keyMapper, об этом подробнее в другом гайде.

Способ 1

Небольшая справка: событие - это сообщение, которое возникает при выполнении определённых условий. Например, если пользователь пошевелил мышь или тыкнул по клавише - в системе происходит соответствующее событие.

С помощью функции document.addEventListener(<событие, <функция>) можно назначить функции-обработчики на различные события.
Можно обрабатывать нажатие на клавишу:

Код:

document.addEventListener("keydown", keyDownHandler);

function keyDownHandler(event) {
    if (Input.keyMapper[event.keyCode] == "ok") {
        // Ваш код
    }
};

"keydown" - это название события нажатия на клавишу клавиатуры. Внутри функции обработчика мы проверяем, не помечена ли нажатая клавиша, как "ok" в Input.keyMapper.
Однако мы можем действовать свободнее и сверять напрямую с числовым кодом клавиши:

Код:

document.addEventListener("keydown", keyDownHandler);

function keyDownHandler(event) {
    // 70 - это код клавиши F
    if (event.keyCode == 70) {
        // Ваш код
    }
};

Существуют различные события, которые можно обрабатывать в играх. Вот некоторые:

Код:

// Нажатие на клавишу клавиатуры:
document.addEventListener("keydown", keyDownHandler);

// Нажатие на клавишу мыши:
document.addEventListener("click", mouseClickHandler);

// Двойное нажатие на клавишу мыши:
document.addEventListener("dblclick", mouseDoubleClickHandler);

// Игрок пошевелил мышкой:
document.addEventListener("mousemove", keyDownHandler);

Давайте немного подробнее про использование мыши. Возможно, вам хочется различать клавиши мыши (да, можно тело функции-обработчика писать прямо при добавлении слушателя событию).

Код:

document.body.addEventListener("mousedown", event => {
    if (event.button == 0) {
        // Нажата левая кнопка
    }
    else if (event.button == 2) {
        // Правая кнопка
    }
    else { 
        // Другая кнопка
    }
}

Способ 2
В коде движка есть функции, которые обрабатывают нажатия на клавиши мыши (сюда же относится обработка сенсорного интерфейса).

Во-первых, в rmmz_core.js можно найти функции, которые делают примерно то, о чём я писал выше:

Код:

TouchInput._setupEventHandlers = function() {
    const pf = { passive: false };
    document.addEventListener("mousedown", this._onMouseDown.bind(this));
    document.addEventListener("mousemove", this._onMouseMove.bind(this));
    document.addEventListener("mouseup", this._onMouseUp.bind(this));
    document.addEventListener("wheel", this._onWheel.bind(this), pf);
    document.addEventListener("touchstart", this._onTouchStart.bind(this), pf);
    document.addEventListener("touchmove", this._onTouchMove.bind(this), pf);
    document.addEventListener("touchend", this._onTouchEnd.bind(this));
    document.addEventListener("touchcancel", this._onTouchCancel.bind(this));
    window.addEventListener("blur", this._onLostFocus.bind(this));
};

TouchInput._onMouseDown = function(event) {
    if (event.button === 0) {
        this._onLeftButtonDown(event);
    } else if (event.button === 1) {
        this._onMiddleButtonDown(event);
    } else if (event.button === 2) {
        this._onRightButtonDown(event);
    }
};

Во вторых, мы можем расширить функционал функций, которые обрабатывают различные события. Для примера возьмём событие отмены с помощью сенсорного интерфейса (сюда же относится нажатие на правую клавишу мыши, если у вас мышь для праворуких):

Код:

const Origin_TouchInput_onCancel = TouchInput._onCancel;
TouchInput._onCancel = function(x, y) {
    // Ваш код
    Origin_TouchInput_onCancel.apply(this, [x, y])
};

Сначала вы выполняем код, после (что важно!) вызываем оригинальный метод. Можно ваш код выполнять после кода движка. Но обязательно вызывайте Origin_TouchInput_onCancel, иначе стандартная обработка нажатия движком не выполнится.

Ещё момент. Напрямую это не относится к тему, но может быть полезно.

Код:

$gameTemp.reserveCommonEvent(N);

С помощью этой функции можно вызвать общее событие. N - номер события в Базе данных проекта. К примеру, вы можете по нажатию на какую-то клавишу вызывать общее событие, где и описана ваша уникальная игровая логика.

Вот здесь демо-проект с реализацией такой идеи.
После запуска новой игры попробуйте нажать на F и ПКМ мыши.

Буду дополнять этот гайд по необходимости, пишите ваши предложения и замечания.